<template>
    <div class="slot-contain">
        <el-card class="box-card">
            <div slot="header" class="clearfix">
                <span>插槽的使用(匿名，具名，作用域插槽)</span>
            </div>
            <div class="box-content">
                <slot name="left"><p>我是左边默认值</p></slot>
                <slot name="center"><p>我是中间默认值</p></slot>
                <slot name="right"><p>我是右边默认值</p></slot>
            </div>
        </el-card>
    </div>
</template>

<script>
    export default {
        name: "slotShow"
    }
</script>

<style scoped lang="less">
    .slot-contain {
        .text {
            font-size: 14px;
        }

        .item {
            margin-bottom: 18px;
        }
        .box-card {
            width: 480px;
            margin:40px auto;

            .el-card__header{
                text-align: center;
            }
            .clearfix{
                display: flex;
                justify-content: center;
                span{
                    color: #0abde3;
                }
            }
        }
        .box-content{
            display: flex;
            justify-content: space-between;
        }
    }

</style>